<%@ include file="/includes/commonHeader.jsp"%>

<script language="JavaScript" src="<%=request.getContextPath() %>/js/jquery-1.8.0.js" type="text/javascript"></script>
<script language="JavaScript" src="<%=request.getContextPath() %>/js/ajax/jsonCombox.js" type="text/javascript"></script>


<h3>Spring MVC + jQuery + JSON </h3>
<h4>AJAX version</h4>

<div id=pagetitle align=left>New Contract.</div><hr>

<form:form action="newJson.html" method="POST" commandName="contactForm" >
<input type="hidden" id = "action" name="action" />

	<div id="lbl_name" class="label_div" title="Name."><b>* Name :</b></div>
    <div id="input_name" class="input_name">
    <form:input id="name" path="name" />
    <br>
    <form:errors path="name" cssClass="lbl_error"/>
    </div>
    
    <div id="lbl_phone" class="label_div" title="Phone."><b>* Phone :</b></div>
    <div id="input_phone" class="input_phone">
    <form:input id="phone" path="phone" />
    <br>
    <form:errors path="phone" cssClass="lbl_error"/>
    </div>
    
    <div id="lbl_email" class="label_div" title="Email."><b>* Email :</b></div>
    <div id="input_email" class="input_email">
    <form:input id="email" path="email" />
    <br>
    <form:errors path="email" cssClass="lbl_error"/>
    </div>
    
    <div id="lbl_Interest" class="label_div" title="Interests"><b>* Interests :</b></div>
    <div id="text_reason" class="scroll_checkboxes">
    	<c:forEach var="item" items="${contactForm.reasonList}">
    	<div id="lbl_item_check1" class="label_item_check">
    		<form:checkbox value="${item.description}" path="reasonDescriptions" /> <c:out value="${item.description}" /> <br>
    	</div>
    	</c:forEach>
    </div>
    <br>
    <form:errors path="reasonDescriptions" cssClass="lbl_error"/>

    <br>
    
    <div id="lbl_Departamento" class="label_div" title="Departamento"><b>* Departamentos :</b></div>
    <form:select id="departamento" path="departamento" onchange="javascript:cargarCombox();">
    	<form:option value="1" selected="selected" label="-- Select value --"/>
    	<form:options items="${contactForm.departamentoList}" itemValue="id" itemLabel="name" />
    </form:select>
	<img id="spinner" src="../images/spinner.gif" alt="Loading" style="display:none;"/>

    <div id="lbl_Provincia" class="label_div" title="Provincia"><b>* Provincias :</b></div>
    <form:select id="provincia" path="provincia">
    	<form:option value="" label="-- Select value --"/>
    	<form:options items="${contactForm.provinciaList}" itemValue="id" itemLabel="name" />
    </form:select>



   	<div id="input_save" class="input_save">
			<input type="button" name="Submit" value="Save" class="button2" onclick="javascript:saveContact();" />
	</div>

</form:form>